<template>
  <div class="box">
    <div ref="vantaRef" style="width: 100%; height: 100vh"></div>
    <div class="banner">
      <h1>医院智能管理系统</h1>
      <h3>
        &ensp;&ensp;Hospital&ensp;&ensp;&ensp;intelligent&ensp;&ensp;&ensp;&ensp;management&ensp;&ensp;&ensp;&ensp;&ensp;system
      </h3>
      <p>登录者：{{userName}}</p>
      <p>Version：1.0</p>
    </div>
  </div>
</template>


<script>
import * as THREE from 'three'
import CELLS from 'vanta/src/vanta.cells'
import Cookies from 'js-cookie'

export default {
  name: 'index',
  data() {
    return {
      userName:""
    }
  },
  mounted() {
    this.vantaEffect = CELLS({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    VANTA.CELLS({
      el: this.$refs.vantaRef,
      /*以下为样式配置*/
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      color1: 0x19cfcf,
      color2: 0xcfca7e,
      size: 2.7,
      speed: 2.5,
    });
    this.getCookie()
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
  methods:{
    getCookie(){
      const username = Cookies.get("username");
      this.userName = username
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  position: relative;
  .banner {
    z-index: 999;
    position: absolute;
    top: 20%;
    left: 10%;
    color: #ffffff;
  }
}
h1 {
  font-size: 66px;
}
p {
  margin-top: 60px;
  font-size: 18px;
}
</style>
